<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
	var map = new BMapGL.Map("allmap");
	// 初始化地图,设置中心点坐标和地图级别
  	map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5);
	// 开启鼠标滚轮缩放
	map.enableScrollWheelZoom(true);
	/*
	api地址：
	https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a0b0
	*/
	/*
	setMapType(mapTypeId: MapTypeId )	none	设置地图类型

	# 地图类型类
	MapTypeId 地图类型常量
	
	常量	描述
	BMAP_NORMAL_MAP	此地图类型展示普通街道视图
	BMAP_EARTH_MAP	此地图类型展示地球卫星视图


	*/
	map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

	/*
	ScaleControl 此类表示比例尺控件。
	构造函数	描述
	ScaleControl(opts: ScaleControlOptions )	创建一个比例尺控件

	ScaleControlOptions 此类表示ScaleControl构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。
	属性	类型	描述
	anchor	ControlAnchor	控件的停靠位置
	offset	Size	控件的偏移值
	*/
	var scaleCtrl = new BMapGL.ScaleControl({ 
		anchor: BMAP_ANCHOR_TOP_LEFT,
		offset: new BMapGL.Size(100, 10)
	});  

	/*
	addControl(control: Control )	none	将控件添加到地图，一个控件实例只能向地图中添加一次
	*/
	// 添加比例尺控件
	map.addControl(scaleCtrl);

	/*
	ZoomControl 此类表示缩放控件。

	构造函数	描述
	ZoomControl(opts: ZoomControlOptions )	创建一个缩放控件


	ZoomControlOptions
	此类表示ZoomControl构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。
	
	属性	类型	描述
	anchor	ControlAnchor	控件的停靠位置
	offset	Size	控件的偏移值

	*/
	var zoomCtrl = new BMapGL.ZoomControl({ 
		anchor: BMAP_ANCHOR_BOTTOM_LEFT
	});  // 添加比例尺控件
	map.addControl(zoomCtrl);
</script>
